<script lang="ts" setup>
import { reactive, ref, computed, watch, nextTick, onBeforeMount, useAttrs } from 'vue'
import { ElTable, ElPagination } from 'element-plus'
import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
import TableBody from './TableBody.vue'
import { propTypes } from '@/utils/propTypes'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const props = defineProps({
  columns: propTypes.arrayOf(propTypes.string),
  isSearch: propTypes.bool.def(false),
  showPagination: propTypes.bool.def(true),
  multipleSelection: propTypes.array.def(() => []),
  pagination: propTypes.object,
  isRememberSelected: propTypes.bool.def(false),
  selectedFlags: propTypes.string.def('id'),
  tableData: propTypes.array,
  emptyDesc: propTypes.string,
  emptyImg: propTypes.string,
  border: propTypes.bool.def(false),
  showEmptyImg: propTypes.bool.def(true),
  dataLoading: propTypes.bool.def(false)
})

const attrs = useAttrs()

const handleListeners = () => {
  Object.keys(attrs).forEach(key => {
    if (key.startsWith('on')) {
      if (['onSizeChange', 'onCurrentChange'].includes(key)) {
        state.paginationEvent[key.slice(2)] = attrs[key]
      } else {
        state.tableEvent[key.slice(2)] = attrs[key]
      }
    } else {
      state.tableAttrs[key] = attrs[key]
    }
  })
}
const toggleRowSelection = row => {
  table.value.toggleRowSelection(row, true)
}
const toggleAllSelection = () => {
  table.value.toggleAllSelection()
}
const clearSelection = () => {
  table.value.clearSelection()
}
const handlerSelected = multipleSelection => {
  state.multipleSelectionCache = [...state.multipleSelectionCache, ...multipleSelection]
  const flags = state.multipleSelectionCache.map(ele => ele[props.selectedFlags])
  // 当前页的选中项索引
  const notCurrentArr = []
  props.tableData.forEach(ele => {
    const resultIndex = flags.indexOf(ele[props.selectedFlags])
    if (resultIndex !== -1) {
      table.value.toggleRowSelection(ele, true)
      notCurrentArr.push(resultIndex)
    }
  })
  notCurrentArr.sort().reduceRight((_, next) => {
    state.multipleSelectionCache.splice(next, 1)
  }, 0)
}

onBeforeMount(() => {
  handleListeners()
})

const state = reactive({
  paginationEvent: {},
  paginationDefault: {
    currentPage: 1,
    pageSizes: [10, 20, 50, 100],
    pageSize: 10,
    layout: 'total, prev, pager, next, sizes, jumper',
    total: 0
  },
  multipleSelectionCache: [],
  tableEvent: {},
  tableAttrs: {}
})

const imgType = computed(() => {
  return props.emptyImg ? props.emptyImg : props.isSearch ? 'tree' : 'noneWhite'
})
const table = ref(null)

const multipleSelectionAll = computed(() => [
  ...state.multipleSelectionCache,
  ...props.multipleSelection
])
watch(
  props.pagination,
  () => {
    state.paginationDefault = {
      ...state.paginationDefault,
      ...props.pagination
    }
  },
  { deep: true, immediate: true }
)

watch(
  props.tableData,
  () => {
    nextTick(() => {
      table.value.doLayout()
    })
    if (!props.isRememberSelected) return
    // 先拷贝 重新加载数据会触发SelectionChange 导致this.multipleSelection为空
    const multipleSelection = [...props.multipleSelection]
    nextTick(() => {
      handlerSelected(multipleSelection)
    })
  },
  { deep: true }
)
defineExpose({
  toggleRowSelection,
  clearSelection,
  toggleAllSelection,
  multipleSelectionAll
})
</script>

<template>
  <div class="flex-table" :class="!tableData.length && 'no-data'">
    <el-table
      header-cell-class-name="header-cell"
      ref="table"
      :border="border"
      v-bind="state.tableAttrs"
      :data="tableData"
      :style="{ width: '100%', height: '100%' }"
      v-on="state.tableEvent"
      v-loading="props.dataLoading"
    >
      <table-body :columns="columns">
        <slot ></slot>
      </table-body>
      <template #empty>
        <empty-background
          v-if="props.showEmptyImg"
          :description="props.emptyDesc ? props.emptyDesc : t('data_set.no_data')"
          :img-type="imgType || 'noneWhite'"
        />
        <div v-else :style="{ width: '100%' }" > </div>
      </template>
    </el-table>
    <div v-if="showPagination && !!tableData.length" class="pagination-cont">
      <el-pagination
        v-model:current-page="state.paginationDefault.currentPage"
        v-model:page-size="state.paginationDefault.pageSize"
        background
        v-bind="state.paginationDefault"
        v-on="state.paginationEvent"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.flex-table {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  .pagination-cont {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }

  &.no-data {
    :deep(.ed-table__inner-wrapper::before) {
      display: none;
    }
  }
}
</style>
